<template>
	<view class="container">
		<image src="/static/login/loginbg.png" class="bg"></image>
		<view class="title-area">
			<view class="arrow" @click="toBack">
			</view>
			<view class="title-text">
				选择城市
			</view>
		</view>
		<view class="position-area">
			<view class="current">
				当前定位:
			</view>
			<view class="current-city">
				<view class="city">
					焦作市
				</view>
				<view class="refresh">
					<view>
						<image src="/static/login/choose-city/refresh.png" mode="" class="refresh-icon"></image>
					</view>
					<view class="city">
						重新定位
					</view>
				</view>
			</view>
		</view>
		<view class="hotcity-area">
			<view class="hotcity-title">
				热门城市
			</view>
			<view class="option-area">
				<view class="option" v-for="num in 12" :key="num">
					北京市
				</view>
			</view>
		</view>
		<view class="city-group-section">
		      <view 
		        class="group-item" 
		        v-for="(letters, group) in cityGroups" 
		        :key="group"
		      >
		        <view class="group-title">{{ group }}</view>
		        <view class="city-list">
		          <view 
		            class="city-item" 
		            v-for="(city, index) in letters" 
		            :key="index" 
		          >
		            {{ city }}
		          </view>
		        </view>
		    </view>
		</view>
		
	</view>
	
</template>

<script setup>
import { ref } from 'vue';

	const toBack = () => {
		uni.navigateBack()
	}
	const cityGroups= ref({
		"A": ["安庆市", "安阳市", "安顺市", "鞍山市", "安康市"],
		"B": ["安庆市", "安阳市", "安顺市", "鞍山市", "安康市"]
	})
</script>

<style scoped>

	
	.container{
		height: 100vh;
		background-color: #eee;
		position: relative;
		z-index: 1;
		padding: 0 20rpx;
	}
	.bg{
		width: 100%;
		position: absolute;
		top: 0;
		left: 0;
		z-index: -1;
	}
	.title-area{
		display: flex;
		align-items: center;
		padding: 30rpx 30rpx;
		font-size: 34rpx;
		color: #FFFFFF;
	}
	.arrow{
	  width: 14rpx;
	  height: 14rpx;
	  border-left-style: solid;
	  border-left-width: 2rpx;
	  border-bottom-style: solid;
	  border-bottom-width: 2rpx;
	  transform: rotate(45deg);
	}
	.title-text{
		 flex-grow: 1;
		  display: flex;
		  justify-content: center; 
	}
	.position-area{
		color: #fff;
		padding: 10rpx 30rpx;
	}
	.current{
		font-size: 30rpx;
	}
	.current-city{
		display: flex;
		align-items: center;
		justify-content: space-between;
	}
	.city{
		font-size: 24rpx;
	}
	.refresh{
		display: flex;
		align-items: center;
		padding: 10rpx 0;
	}
	.refresh-icon{
		width: 30rpx;
		height: 25rpx;
		vertical-align: middle;
		padding-right: 10rpx;
	}
	.hotcity-area{
		padding: 25rpx 30rpx;
		background-color: #FFFFFF;
		border-radius: 30rpx;
		margin-bottom: 20rpx;
	}
	.hotcity-title{
		border-bottom: 1rpx solid #eee;
		padding: 15rpx 0;
	}
	.option-area{
		display: flex;
		flex-wrap: wrap;
		justify-content: space-around;
		padding: 10rpx 0;
	}
	.option{
		font-size: 24rpx;
		background-color: #eee;
		min-width: 200rpx;
		min-height: 60rpx;
		border-radius: 30rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-top: 20rpx;
	}
	.city-group-section{
		padding-bottom: 20rpx;
	}
	.group-title{
		padding: 0 30rpx;
		padding-top: 30rpx;
	}
	.group-item{
		background-color: #FFFFFF;
		border-radius: 30rpx;
		margin-bottom: 20rpx;
	}
	.city-item{
		padding: 20rpx 30rpx;
		border-bottom: 1rpx solid #eee;
		font-size: 24rpx;
	}
	.city-list .city-item:last-child {
	  border-bottom: none;
	  padding-bottom: 30rpx;
	  border-radius: 0 0 30rpx 30rpx;
	}
</style>
